<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 标题列表</text>
		</view>

		<mescroll-body ref="mescrollRef " @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="titleList margin-top_30rpx " v-for="(item,index) in aititlePage" :key="index">
				<view class="padding-bottom_40rpx border-bottom-ECECEC">
					{{item.content}}
					<text style="color: #0184F0;">{{item.topic}}</text>
				</view>

				<view class="flex-between">
					<view class="flex listEdit" @click="paste(item.content,item.topic)">
						<image class="icon" :src="copy" mode=""></image>

						<text style="color: #0184F0;margin-left: 8rpx;">复制</text>

					</view>
					<view class="flex listEdit" @click="edit(item)">
						<image class="icon" :src="group3182" mode=""></image>

						<text style="color: #0184F0;margin-left: 8rpx;">修改标题</text>

					</view>
					<view class="flex listEdit" @click="delFn(item)">


						<uni-icons type="trash-filled" color="#FF0000" size="24"></uni-icons>
						<text style="color: #FF0000;">删除</text>

					</view>

				</view>
			</view>
		</mescroll-body>




		<sunui-popup ref="videoNum">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>修改标题</text>
						<uni-icons @click='closeVideoNum()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="textarea-box ">
						<textarea placeholder-style="font-size:30rpx;" v-model="copywriting" placeholder="话题修改"
							maxlength="500" style="height: 100%;background-color: #F6F8FF;" />
					</view>






					<view class="PublishTags flex" @click="videoNumBtn()">
						确定
					</view>

				</view>

			</template>
		</sunui-popup>






	</view>
</template>

<script>
	export default {
		data() {
			return {
				copy: this.$imgs.copy,
				group3182: this.$imgs.group3182,
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				info: {},
				aititlePage: [],
				modifyTitle: {},
				copywriting: ''

			}
		},
		onLoad(options) {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			console.log(options.info)
			this.info = JSON.parse(options.info)




		},
		computed: {



		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		methods: {
			textWithoutSpaces(text) {
				return text.replace(/\s+/g, ''); // 去除所有空格
			},
			async videoNumBtn() {


				const result = await this.$http.get({
					url: this.$api.aititleEdit,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						title_id: this.modifyTitle.id,
						content: this.copywriting




					}
				});
				if (result.errno == 0) {
					
                    this.copywriting=''
					this.$sun.toast(result.message, 'none')
					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})


					this.$refs.videoNum.close()

				} else {
					this.$sun.toast(result.message, 'none')
				}

			},

			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.aititlePage,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						page: scroll.num,
						psize: 10,
						aicreate_id: this.info.id




					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.aititlePage = [];
					this.aititlePage = this.aititlePage.concat(result.data.list);

					console.log(this.aititlePage)

				}
			},
			navBack() {
				this.$sun.navBack()
			},

			paste(title, topic) {
				let titles = this.textWithoutSpaces(title + topic)
				uni.setClipboardData({
					data: titles,
					success: () => {
						// 复制成功的回调
						uni.showToast({
							title: '复制文案成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log(err)
						// 复制失败的回调
						uni.showToast({
							title: '复制文案失败',
							icon: 'error'
						});
					}
				});


			},
			closeVideoNum() {
				this.$refs.videoNum.close()
			},

			edit(item) {

				this.modifyTitle = item
				
				this.copywriting=item.content

				this.$refs.videoNum.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});
			},
			delFn(item) {
				uni.showModal({
					title: '是否确定要删除',
					content: '是否要删除该标题，如果删除，将不可恢复，请您谨慎选择',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$http.get({
								url: this.$api.aititleDel,
								data: {
									// 用户id
									uid: uni.getStorageSync('uid'),
									 title_id: item.id,
									




								}
							});
							if (result.errno == 0) {
                               this.$sun.toast(result.message,'none')
							   this.$nextTick(() => {
							   	this.mescroll?.resetUpScroll();
							   })
							   

							}else{
								this.$sun.toast(result.message,'none')
							}

						} else if (res.cancel) {

						}
					}
				});
			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		height: 100vh;
		padding: 20rpx;

		.titleList {

			width: 710rpx;
			// height: 334rpx;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 0 20rpx;
			background: rgb(255, 255, 255);

			.listEdit {
				width: 50%;
				height: 100rpx;
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin: 0 5rpx;
				margin-bottom: 5rpx;
			}
		}

		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.textarea-box {
				// width: 630rpx;
				border-radius: 20rpx;
				background: #F6F8FF;
				padding: 0 24rpx;

				height: calc(100vh - 1120rpx);

				.textarea-color {
					color: #999;
				}
			}

			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;


				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}





			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}


	}
</style>